<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC 视频播放器 (优化版)</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .video-container { position: relative; display: inline-block; }
        #remoteVideo { width: 640px; height: 480px; margin: 10px; border: 1px solid #ccc; }
        .no-signal {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            color: red; font-size: 18px; background: rgba(0,0,0,0.5); padding: 10px 20px;
            display: none; z-index: 10;
        }
        input { width: 640px; margin: 10px; padding: 5px; }
        button { margin: 5px; padding: 8px 12px; cursor: pointer; }
        #status { margin: 10px 0; font-weight: bold; color: #333; }
        .stats-panel {
            width: 640px; margin: 10px; padding: 10px; border: 1px solid #eee;
            background: #f9f9f9; display: none;
        }
        .stats-panel h4 { margin: 0 0 10px 0; }
    </style>
</head>
<body>
<h1>WebRTC 本地视频播放（优化版）</h1>
<div class="video-container">
    <video id="remoteVideo" autoplay playsinline controls></video>
    <div id="noSignal" class="no-signal">无信号，请检查连接</div>
</div>
<br>
<input type="text" id="filePath" placeholder="本地文件路径 (e.g., /tmp/video.mp4)"
       value="/home/renwq/Downloads/video_merge/9e44b6e312ca42abaed9e9fbf5caff6a.mp4">
<br>
<button id="startBtn">1. 开始连接</button>
<button id="playBtn">2. 加载播放</button>
<button id="pauseBtn">3. 暂停</button>
<button id="resumeBtn" disabled>4. 续播</button>
<button id="showStatsBtn">显示统计</button>
<div id="status">状态: 未连接</div>
<div id="statsPanel" class="stats-panel">
    <h4>RTP 统计信息</h4>
    <div>总接收字节: <span id="totalBytes">0</span></div>
    <div>总丢包数: <span id="totalLost">0</span></div>
    <div>视频码率: <span id="videoBitrate">0</span> kbps</div>
    <div>网络延迟: <span id="jitter">0</span> ms</div>
</div>

<script src="player.js"></script>
</body>
</html>